<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div class="alert alert-danger" role="alert">紫色代表当前考题;黄色代表完成考题;绿色代表标记考题</div>
<div id="exam-main-box">
    <input type="hidden" id="exam-page-examId" th:value="${studentExam.exam_id}">
    <input type="hidden" id="exam-page-examStudentId" th:value="${studentExam.student_id}">
    <input type="hidden" id="exam-page-start_time" th:value="${#dates.format(studentExam.start_time,'yyyy-MM-dd HH:mm:ss')}">
    <th:block th:if="${exam.duration==null}">
        <input type="hidden" id="exam-page-end_time" th:value="${#dates.format(exam.end_time,'yyyy-MM-dd HH:mm:ss')}"/>
    </th:block>
    <th:block th:if="${exam.duration!=null}">
        <input type="hidden" id="exam-page-duration" th:value="${exam.duration}">
    </th:block>
    <div id="exam-page-top">
        <span id="exam-page-name" th:text="${exam.name+'【'+student.sname+'】'}"></span>
        <span id="exam-page-time"  th:text="${exam.duration!=null?'0时:0分:0秒':#dates.format(studentExam.start_time,'yyyy-MM-dd HH:mm:ss')}"></span>

    </div>
    <div id="exam-page-right">
        <dl>
            <th:block th:each="question:${questions}">
                <th:block th:if="${questionStat.index==0 || question.type!=questions.get(questionStat.index+(-1)).type}" >
                    <dt th:text="${question.type}"></dt>
                </th:block>
                <th:block th:if="${answerVO.answerStatus.size()>0}">
                    <dd th:classappend="${answerVO.answerStatus.get(questionStat.index)!='no'?'finish':''}" th:text="${questionStat.index+1}" th:onclick="studentExam.question_select(this,[[${questionStat.index}]])" th:class="${questionStat.index==0?'active':''}"></dd>
                </th:block>
                <th:block th:unless="${answerVO.answerStatus.size()>0}">
                    <dd th:text="${questionStat.index+1}" th:onclick="studentExam.question_select(this,[[${questionStat.index}]])" th:class="${questionStat.index==0?'active':''}"></dd>
                </th:block>
            </th:block>
        </dl>
        <div><button onclick="studentExam.commitExam()" style="margin-top: 40px;padding-left: 10px" class="btn btn-info">交卷</button></div>
        <div id="exam-page-right_select_symbol">

        </div>
    </div>
    <div id="exam-page-left">
        <div id="exam-page-left-top">
            <span onclick="studentExam.prev()">上一题</span>
            <span onclick="studentExam.label()">标记</span>
            <span onclick="studentExam.next()">下一题</span>
        </div>
        <div id="exam-page-left-content">
            <th:block th:if="${questions!=null && questions.size()!=0}">
                <div  th:each="question:${questions}" class="question" th:classappend="${questionStat.index==0?'active':''}">
                    <div class="question-title"> <b th:text="${questionStat.index+1+'.'+question.type}"></b></div>
                    <div class="subject" th:text="${question.subject}"></div>
                    <th:block th:if="${question.type=='单选题'}">
                        <div class="option-box">
                            <div th:each="number:${question.optionNumber}" class="row">
                                <th:block th:if="${answerVO.answers.size()>0}">
                                    <div th:classappend="${answerVO.answers.get(questionStat.index) == number?'active':''}" class="question1 col-md-2" th:text="${number}"></div>
                                </th:block>
                                <th:block th:unless="${answerVO.answers.size()>0}">
                                    <div  class="question1 col-md-2" th:text="${number}"></div>
                                </th:block>
                                <div class="col-md-10" th:text="${question.options[numberStat.index]}"></div>
                            </div>
                        </div>
                    </th:block>
                    <th:block th:if="${question.type=='多选题'}">
                        <div class="option-box">
                            <div th:each="number:${question.optionNumber}" class="row">
                                <th:block th:if="${answerVO.answers.size()>0}">
                                    <div th:classappend="${answerVO.answers.get(questionStat.index).get(numberStat.index) == number?'active':''}" class="question2 col-md-2" th:text="${number}"></div>
                                </th:block>
                                <th:block th:unless="${answerVO.answers.size()>0}">
                                    <div class="question2 col-md-2" th:text="${number}"></div>
                                </th:block>

                                <div class="col-md-10" th:text="${question.options[numberStat.index]}"></div>
                            </div>

                        </div>
                    </th:block>
                    <th:block th:if="${question.type=='判断题'}">
                        <div class="option-box">
                            <div class="row">
                                <th:block th:if="${answerVO.answers.size()>0}">
                                    <div th:classappend="${answerVO.answers.get(questionStat.index) == '正确'?'active':''}" class="col-md-2 question3">正确</div> <div th:classappend="${answerVO.answers.get(questionStat.index) == '错误'?'active':''}" class="col-md-2 question3">错误</div>
                                </th:block>
                                <th:block th:unless="${answerVO.answers.size()>0}">
                                    <div class="col-md-2 question3">正确</div> <div class="col-md-2 question3">错误</div>
                                </th:block>

                            </div>
                        </div>
                    </th:block>
                    <th:block th:if="${question.type=='填空题'}">
                        <div class="option-box">
                            <div th:each="answer:${question.answers}" class="row">
                                <th:block th:if="${answerVO.answers.size()>0}">
                                    <div class="question4 col-md-2 " th:text="填空+${answerStat.index+1}"></div><input th:value="${answerVO.answers.get(questionStat.index).get(answerStat.index) != 'no'?answerVO.answers.get(questionStat.index).get(answerStat.index):''}" class="form-control  col-md-10" type="text">
                                </th:block>
                                <th:block th:unless="${answerVO.answers.size()>0}">
                                    <div class="question4 col-md-2 " th:text="填空+${answerStat.index+1}"></div><input class="form-control  col-md-10" type="text">
                                </th:block>

                            </div>

                        </div>
                    </th:block>
                    <th:block th:if="${question.type=='综合题'}">
                        <div class="option-box">
                            <div class="row">
                                <div  class="question5 col-md-2">
                                    <th:block th:if="${answerVO.answers.size()>0}">
                                        <input th:value="${answerVO.answers.get(questionStat.index)}" type="hidden" class="question5-text-input">
                                    </th:block>
                                    <th:block th:unless="${answerVO.answers.size()>0}">
                                        <input type="hidden" class="question5-text-input">
                                    </th:block>

                                    <div class="question5-text"></div>
                                </div>
                            </div>
                        </div>
                    </th:block>
                </div>
            </th:block>

        </div>

    </div>
</div>
<script>
    $(function (){
        //处理考试的时间
        studentExam.timerHandler()
        //处理考试选项的选定
        studentExam.optionInitSet()
        //一段时间存储数据
        studentExam.cacheAnswerTimer()
    })
</script>
</html>